<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:10%;height: 80%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
    </template>
    <a-card :bordered="false">
      <!-- table区域-begin -->
      <div style="width:100%; min-width:800px">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button v-if="btnEnableList.indexOf(1)>-1" @click="handleAdd" type="primary" icon="plus">新增</a-button>
        </div>
        <a-table
          bordered
          ref="table"
          size="middle"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          @change="handleTableChange">
          <span slot="action" slot-scope="text, record">
            <a v-if="btnEnableList.indexOf(1)>-1" @click="handleEdit(record)">编辑</a>
            <a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical" />
            <a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </span>
          <template slot="customRenderType" slot-scope="type">
            <span v-if="type==='1'">统一数字</span>
            <span v-if="type==='2'">阶梯提成</span>
          </template>
        </a-table>
      </div>
      <div style="padding: 10px;">
        <a-row class="form-row" :gutter="24">
          <a-col :lg="24" :md="24" :sm="24">
            说明：1、提成类型只能为统一数字或阶梯提成；2、一个单据多人完成，提成均摊；3、只给收款完成的销售单据计算提成。
          </a-col>
        </a-row>
      </div>
      <!-- table区域-end -->
      <!-- 表单区域 -->
      <commision-rule-modal ref="modalForm" @ok="modalFormOk"></commision-rule-modal>
    </a-card>
  </a-modal>
</template>

<script>
  import CommisionRuleModal from './CommisionRuleModal'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  export default {
    name: 'CommisionRule',
    mixins:[JeecgListMixin],
    components: {
      CommisionRuleModal
    },
    data () {
      return {
        title: '提成规则',
        visible: false,
        confirmLoading: false,
        disableSubmit: false,
        commisionType: '1',
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
        form: this.$form.createForm(this),
        // 表头
        columns: [
          {
            title: '#', dataIndex: '', key:'rowIndex', width:40, align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {title: '提成类型', dataIndex: 'type', width: 100,
            scopedSlots: { customRender: 'customRenderType' }
          },
          {title: '起始金额', dataIndex: 'beginPrice', width: 100},
          {title: '结束金额', dataIndex: 'endPrice', width: 100},
          {title: '比例(%)', dataIndex: 'percent', width: 100},
          {
            title: '操作',
            dataIndex: 'action',
            width: 100,
            align:"center",
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: "/api/plugin/commision/commision/list",
          delete: "/api/plugin/commision/commision/delete",
        }
      }
    },
    created() {
    },
    methods: {
      show() {
        this.visible = true
        this.loadData()
      },
      close () {
        this.$emit('close');
        this.disableSubmit = false;
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less'
</style>